interface IState {
  visible: boolean
  urls: string[]
}

const state = reactive<IState>({
  visible: false,
  urls: []
})

export default function usePreviewImage() {
  function previewImage(urls: string[]) {
    state.urls = urls
    state.visible = true
  }

  watch(
    () => state.visible,
    visible => {
      if (!visible) {
        state.urls = []
      }
    }
  )

  return {
    state,
    previewImage
  }
}
